<template>
  <div class="box">
    <!-- 一、头部 -->
    <div class="header">
      <!-- 搜索框 -->
      <van-search
        class="search-box"
        v-model="value1"
        shape="round"
        background="#fff"
        placeholder="清风抽纸"
        show-action
        @search="onSearch"
        @focus="show"
        
      >
        <!-- 搜索框左侧 -->
        <template #left>
          <van-icon name="arrow-left" @click="goBack" />
        </template>
        <!-- 搜索框右侧 -->
        <template #action>
          <van-button @click="onSearch" class="search" type="danger"
            >搜索</van-button
          >
        </template>
      </van-search>
    </div>
    <main class="content">
      <!-- 二、最近搜索 -->
    <div class="list">
      <span>最近搜索
        <van-icon class="del" name="delete-o" />
      </span>
     <!--  <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul> -->
    </div>
    <!-- 三、热门搜索 -->
    <div class="list">
      <span>热门搜索 </span>
      <div class="li">
         <ul class="goods"
          v-for="obj in goods"
           :key="obj.keyword"
          @clcik="goDetail(obj.keyword)">
          <li class="show1">{{obj.keyword}}</li>
         </ul>
      </div>
    </div>
    </main>
  </div>
</template>

<script>
import axios from "axios"

export default {
  name: "search",
  data() {
    return {
      value1: "",
      goods:[],
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    goDetail(a){
      localStorage.setItem("this,keyword",a);
      this.$router.push("/brandGoods");
      this.value1=localStorage.getItem("this.keyword");
    },
    // 输入框获得焦点时触发
    show() {
      document.querySelector(".van-button").style.opacity = 1;
    },
   
    onSearch() {
      this.$router.push("/brandGoods/");
      localStorage.setItem("this.keyword",this.value1)
    },
   
  },
  created(){
    axios({
      url:"/api/pro/hotword",
    }).then((res)=>{
      if(res.data.code == 200){
        this.goods = res.data.data;
      }
    })
  }
};
</script>

<style scoped>
.box{
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
.header {
  display: flex;
  justify-content: space-between;
  height: 3.6675rem;
}
.van-icon {
  float: left;
  padding-left: 10px;
  line-height: 3.5rem;
  color: rgb(24, 24, 64);
}
.search-box {
  flex: 1;
}
.search {
  width: 4.5rem;
  height: 2rem;
  border-radius: 0.5333rem;
  margin-left: 0.8333rem;
  vertical-align: middle;
}
.van-search {
  display: flex;
  justify-content: space-around;
}
.list {
  padding: 15px;
  background-color: #fff;
}
.li{
  display: flex;
  flex-wrap: wrap;
}
.content {
  flex: 1;
  overflow: auto;
  background-color: #efefef;
}
span{
  position: relative;
}
.del{
  position: absolute;
  top: -1.2167rem;
  left: 4.6667rem;
}
.show1{
  height: 20px;
  border: 1px solid gray;
  color: gray;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  margin: 5px;
  padding: 0 5px;
}
</style>